<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>读书郎</title>
    <link rel="stylesheet" type="text/css" href="CSS/all.css"  th:href="@{/CSS/all.css}"/>
    <link rel="stylesheet" type="text/css" href="CSS/home.css" th:href="@{/CSS/home.css}"/>
    <script th:src="@{/JS/jquery.js}"></script>

</head>

<body>
    <header>读书郎</header>

    <div class="title">
         <a th:href="@{/Story/getAllCategoryStoryList(isLogin='')}" class="activetitle">首页</a>
        <a th:href="@{/Category/getBookByCategoryId(CategoryId=0)}">分类</a>
        <a th:href="@{/Store/getTotalPage(index=5)}">排行</a>
        <a th:href="@{/Story/getStoryEndPage(status='已完结')}">全本</a>
        <a th:href="@{/Store/getUserInfo}">会员中心</a>
        
    </div>
    <div class="searchinput">
            <input class="searchBook" type="text" placeholder="请输入书名或作者" />
            <button  class="search"><svg class="icon" style="width: 1.5rem; height: 1.5rem;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1128"><path d="M963.80969 874.914509 746.640896 653.056614c-3.587891-3.66551-7.710925-6.443725-12.110336-8.352256 46.655488-62.60183 74.359501-140.751667 74.359501-225.526477 0-205.788877-163.237376-372.568371-364.609741-372.568371C242.909082 46.60951 79.67785 213.390029 79.67785 419.177984c0 205.792973 163.231232 372.569395 364.603597 372.569395 92.421632 0 176.807936-35.134157 241.069056-93.044122 1.778586 3.55799 4.115866 6.89705 7.027302 9.871872l217.115546 221.85687c14.970573 15.300506 39.292518 15.300506 54.316237 0C978.780262 915.131494 978.780262 890.21399 963.80969 874.914509zM444.281446 732.950221c-169.564672 0-307.06176-140.4928-307.06176-313.772237 0-173.332685 137.496064-313.766195 307.06176-313.766195 169.570816 0 307.06176 140.433408 307.06176 313.766195C751.343206 592.457421 613.851238 732.950221 444.281446 732.950221z" p-id="1129"></path></svg></button>
    </div>
    <main>
        <div class="kind">
        <div class="card" th:if="${AllCategoryStoryList['recommend']!=null}">
            <h2>好书推荐</h2>
            <div class="info" th:each="recommend : ${AllCategoryStoryList['recommend']}" th:data-value="${recommend.id}">
                <!--<img th:src="@{${recommend.imgUrl}}" >-->
                <img th:src="@{${recommend.imgUrl}}">
                <div class="cardinfo">
                    <h2 th:text="${recommend.name}"></h2>
                    <span th:text="${recommend.author}"></span>
                    <p th:text="${recommend.description}">
                    </p>
                </div>
            </div>

         </div>
        </div>
        <div class="kind">
                <div class="card" th:if="${AllCategoryStoryList['Frist:newBook']!=null}">
                       <h2>最新入库 <a class="more" th:href="@{/Chapter/getNewChapter(index=11)}">更多...</a></h2>
                       <div class="info" th:each="FristNewBook : ${AllCategoryStoryList['Frist:newBook']}" th:data-value="${FristNewBook.id}">
                           <img th:src="@{${FristNewBook.imgUrl}}" alt="" />
                           <div class="cardinfo">
                               <h2 th:text="${FristNewBook.name}"></h2>
                               <span th:text="${FristNewBook.author}"></span>
                               <p th:text="${FristNewBook.description}">

                               </p>
                           </div>
                       </div>
                </div>
            <ul class="xslist" th:each="newBook : ${AllCategoryStoryList['newBook']}">
                <li><a th:href="@{/Chapter/getChapterByBookId(bookId=${newBook.id})}" th:text="${newBook.name}" ></a><span th:text="${newBook.author}"></span></li>
            </ul>
          </div>

        <div class="kind">
         <div class="card" th:if="${AllCategoryStoryList['Frist:玄幻小说']!=null}">
                <h2>玄幻小说 <a class="more" th:href="@{/Category/getBookByCategoryId(CategoryId=${AllCategoryStoryList['Frist:玄幻小说'].categoryId})}">更多...</a></h2>
                <div class="info" th:each="xhFristBook : ${AllCategoryStoryList['Frist:玄幻小说']}" th:data-value="${xhFristBook.id}">
                    <img th:src="@{${xhFristBook.imgUrl}}" alt="">
                    <div class="cardinfo">
                        <h2 th:text="${xhFristBook.name}"></h2>
                        <span th:text="${xhFristBook.author}"></span>
                        <p th:text="${xhFristBook.description}">
                        </p>
                    </div>
                </div>
             </div>
            <ul class="xslist"  th:each="xhBook : ${AllCategoryStoryList['玄幻小说']}" >
                <li><a th:href="@{/Chapter/getChapterByBookId(bookId=${xhBook.id})}" th:text="${xhBook.name}" ></a><span th:text="${xhBook.author}"></span></li>
            </ul>
            </div>
            <div class="kind">
                <div class="card" th:if="${AllCategoryStoryList['Frist:修真小说']!=null}">
                    <h2>修真小说 <a class="more" th:href="@{/Category/getBookByCategoryId(CategoryId=${AllCategoryStoryList['Frist:修真小说'].categoryId})}">更多...</a></h2>
                    <div class="info" th:each="xzFristBook : ${AllCategoryStoryList['Frist:修真小说']}" th:data-value="${xzFristBook.id}">
                        <img th:src="@{${xzFristBook.imgUrl}}" alt="">
                        <div class="cardinfo">
                            <h2 th:text="${xzFristBook.name}"></h2>
                            <span th:text="${xzFristBook.author}"></span>
                            <p th:text="${xzFristBook.description}">
                            </p>
                        </div>
                    </div>
                </div>
                <ul class="xslist"  th:each="xzBook : ${AllCategoryStoryList['修真小说']}" >
                    <li><a th:href="@{/Chapter/getChapterByBookId(bookId=${xzBook.id})}" th:text="${xzBook.name}" ></a><span th:text="${xzBook.author}"></span></li>
                </ul>
            </div>
        <div class="kind">
            <div class="card" th:if="${AllCategoryStoryList['Frist:都市小说']!=null}">
                <h2>都市小说 <a class="more" th:href="@{/Category/getBookByCategoryId(CategoryId=${AllCategoryStoryList['Frist:都市小说'].categoryId})}">更多...</a></h2>
                <div class="info" th:each="dsFristBook : ${AllCategoryStoryList['Frist:都市小说']}" th:data-value="${dsFristBook.id}">
                    <img th:src="@{${dsFristBook.imgUrl}}" alt="">
                    <div class="cardinfo">
                        <h2 th:text="${dsFristBook.name}"></h2>
                        <span th:text="${dsFristBook.author}"></span>
                        <p th:text="${dsFristBook.description}">
                        </p>
                    </div>
                </div>
            </div>
            <ul class="xslist"  th:each="dsBook : ${AllCategoryStoryList['都市小说']}" >
                <li><a th:href="@{/Chapter/getChapterByBookId(bookId=${dsBook.id})}" th:text="${dsBook.name}" ></a><span th:text="${dsBook.author}"></span></li>
            </ul>
        </div>
        <div class="kind">
            <div class="card" th:if="${AllCategoryStoryList['Frist:穿越小说']!=null}">
                <h2>穿越小说 <a class="more" th:href="@{/Category/getBookByCategoryId(CategoryId=${AllCategoryStoryList['Frist:穿越小说'].categoryId})}">更多...</a></h2>
                <div class="info" th:each="cyFristBook : ${AllCategoryStoryList['Frist:穿越小说']}" th:data-value="${cyFristBook.id}">
                    <img th:src="@{${cyFristBook.imgUrl}}" alt="">
                    <div class="cardinfo">
                        <h2 th:text="${cyFristBook.name}"></h2>
                        <span th:text="${cyFristBook.author}"></span>
                        <p th:text="${cyFristBook.description}">
                        </p>
                    </div>
                </div>
            </div>
            <ul class="xslist"  th:each="cyBook : ${AllCategoryStoryList['穿越小说']}" >
                <li><a th:href="@{/Chapter/getChapterByBookId(bookId=${cyBook.id})}" th:text="${cyBook.name}" ></a><span th:text="${cyBook.author}"></span></li>
            </ul>
        </div>
        <div class="kind">
            <div class="card" th:if="${AllCategoryStoryList['Frist:网游小说']!=null}">
                <h2>网游小说 <a class="more" th:href="@{/Category/getBookByCategoryId(CategoryId=${AllCategoryStoryList['Frist:网游小说'].categoryId})}">更多...</a></h2>
                <div class="info" th:each="wyFristBook : ${AllCategoryStoryList['Frist:网游小说']}" th:data-value="${wyFristBook.id}">
                    <img th:src="@{${wyFristBook.imgUrl}}" alt="">
                    <div class="cardinfo">
                        <h2 th:text="${wyFristBook.name}"></h2>
                        <span th:text="${wyFristBook.author}"></span>
                        <p th:text="${wyFristBook.description}">
                        </p>
                    </div>
                </div>
            </div>
            <ul class="xslist"  th:each="wyBook : ${AllCategoryStoryList['网游小说']}" >
                <li><a th:href="@{/Chapter/getChapterByBookId(bookId=${wyBook.id})}" th:text="${wyBook.name}" ></a><span th:text="${wyBook.author}"></span></li>
            </ul>
        </div>
        <div class="kind">
            <div class="card" th:if="${AllCategoryStoryList['Frist:科幻小说']!=null}">
                <h2>科幻小说 <a class="more" th:href="@{/Category/getBookByCategoryId(CategoryId=${AllCategoryStoryList['Frist:科幻小说'].categoryId})}">更多...</a></h2>
                <div class="info" th:each="khFristBook : ${AllCategoryStoryList['Frist:科幻小说']}" th:data-value="${khFristBook.id}">
                    <img th:src="@{${khFristBook.imgUrl}}" alt="">
                    <div class="cardinfo">
                        <h2 th:text="${khFristBook.name}"></h2>
                        <span th:text="${khFristBook.author}"></span>
                        <p th:text="${khFristBook.description}">
                        </p>
                    </div>
                </div>
            </div>
            <ul class="xslist"  th:each="khBook : ${AllCategoryStoryList['科幻小说']}" >
                <li><a th:href="@{/Chapter/getChapterByBookId(bookId=${khBook.id})}" th:text="${khBook.name}" ></a><span th:text="${khBook.author}"></span></li>
            </ul>
        </div>

        <div class="kind">
            <div class="card" th:if="${AllCategoryStoryList['Frist:其他小说']!=null}">
                <h2>其他小说 <a class="more" th:href="@{/Category/getBookByCategoryId(CategoryId=7)}">更多...</a></h2>
                <div class="info" th:each="qtFristBook : ${AllCategoryStoryList['Frist:其他小说']}" th:data-value="${qtFristBook.id}">
                    <img th:src="@{${qtFristBook.imgUrl}}" alt="">
                    <div class="cardinfo">
                        <h2 th:text="${qtFristBook.name}"></h2>
                        <span th:text="${qtFristBook.author}"></span>
                        <p th:text="${qtFristBook.description}">
                        </p>
                    </div>
                </div>
            </div>
            <!--<div th:if="${AllCategoryStoryList['Frist:其他小说']==null}" style="text-align:center;margin-top: 30px;">-->
                <!--暂无数据-->
            <!--</div>-->
            <ul class="xslist"  th:each="qtBook : ${AllCategoryStoryList['其他小说']}" >
                <li><a th:href="@{/Chapter/getChapterByBookId(bookId=${qtBook.id})}" th:text="${qtBook.name}" ></a><span th:text="${qtBook.author}"></span></li>
            </ul>
        </div>
    </main>
    <footer>
            本站所有小说为转载作品，所有章节均由网友上传，转载至本站只是为了宣传本书让更多读者欣赏。
    </footer>
</body>
<script  th:inline="javascript">

    $('div.card>div.info').click(function(){
        // console.log(this)
        console.log(this.dataset.value)
        // console.log(dataset().value)
        location.href='/Chapter/getChapterByBookId?bookId='+this.dataset.value+''
    })
    $('button.search').click(function(){
        var nameOrAuthor = $(".searchBook").val();
        console.log(nameOrAuthor);
        location.href='/Story/getStoryList?nameOrAuthor='+nameOrAuthor;
    })

</script>
</html>